<%@ page language="java" pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
${aier_doctype}
<html <s:property value="aier-html-xmlns" escape="false"/>>
<head>
<meta http-equiv="Content-Type" content="${aier_content_type}" />
<meta name="keywords" content="${aier_keyworks}" />
<meta name="description" content="${aier_description}" />
<title>${aier_title}</title>
<link rel="stylesheet" href="${aier_css_url}${aier_jqui_css}ui.css" />
<link rel="Stylesheet" href="${aier_css_url}jq/jq.css" />
<link rel="Stylesheet" href="${aier_css_url}jq/multiselect.css" />
<link rel="stylesheet" href="${aier_css_url}jc/chosen.css">
<link rel="stylesheet" href="${aier_css_url}social/module/jq-msg.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/reset.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/btn.css" />
<link rel="stylesheet" href="${aier_css_url}social/classes/classhomepage.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/fancybox.css">
<link rel="stylesheet" href="${aier_css_url}social/user/userCenter/usercenter.css">

<script type="text/javascript" src="${aier_js_url}j.js"></script>
<script type="text/javascript" src="${aier_js_url}b.js"></script>
<script type="text/javascript" src="${aier_js_url}${aier_jqui_js}ui.js"></script>
<script type="text/javascript" src="${aier_js_url}97/WdatePicker.js"></script>
<script type="text/javascript" src="${aier_js_url}jp/msg.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/cn.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/jq.js"></script>
<script type="text/javascript" src="${aier_js_url}lib/ja.js"></script>
<script type="text/javascript" src="${aier_js_url}jc/cj.js"></script>
<script type="text/javascript" src="${aier_js_url}lib/block.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/multiselect.js"></script>
<script type="text/javascript" src="${aier_js_url}social/user/fancybox.js"></script>
<script type="text/javascript" src="${aier_js_url}trantime/jquery-aier.js"></script>

</head>
<body>

	<!-- 顶栏 -->
	<s:action name="userhomecomm_homeHead" namespace="/user"
		executeResult="true"></s:action>

	<div class="window-content">
		<!-- 正文 -->
		<div class="wrap wrap-class-center">
			<!-- class topBg -->
			<s:action name="ccomm_classesHTitle" namespace="/classes"
				executeResult="true"></s:action>
			<!-- main -->

			<div class="wrap-main">
				<!-- 中间导航栏 -->
				<div class="wrap-main-nav">
					<ul class="float-list clearfix">
						<li><a class="class-center-tag"
							href="${aier_url}classes/classeshome_classHomePage.shtml?cid=${cid}">作业栏</a>
						</li>
						<li><a class="class-center-tag"
							href="${aier_url}classes/classeshome_classesAlbum.shtml?cid=${cid}">班级风采</a>
						</li>
						<li><a class="class-center-tag"
							href="${aier_url}classes/classeshome_classesBoast.shtml?cid=${cid}">夸一夸</a>
						</li>
						<li><a class="class-center-tag current last-has-border" 
						    href="${aier_url}classes/classeshome_classesPhotos.shtml?cid=${cid}">班级相册</a>
						</li>
					</ul>
				</div>

				<!-- 相册 -->
				<div class="wrap-main-column clearfix">
					<div class="upload-photo-bar">
						<a href="javascript:;" class="btn-orange-2" id="btnUploadAlbum"><span>上传照片</span>
						</a>
					</div>

					<div id="uptListDiv" class="photo-album-list">
                        
                    </div>
				</div>
				<!-- end 相册 -->
			</div>
			<!-- 返回顶部 -->
			<s:action name="userhomecomm_backToTop" namespace="/user"
				executeResult="true"></s:action>
			<!-- end 返回顶部 -->
		</div>
		<!-- footer copyright -->
		<s:action name="userhomecomm_homeFooter" namespace="/user" executeResult="true"></s:action>
		<!-- /footer copyright -->
	</div>


	<!-- 相册图片上传dialog -->
	<div id="dialogUploadAlbum" class="upload-albumn-picture"
		style="display:none;" title="上传图片到相册">
		<div class="board">
			<!-- 选择上传相册 -->
			<div class="select-bar clearfix	">
				<div class="upload-to">上传到：</div>
				<div id="uaUptidDiv" class="select-albumn">
                    
                </div>
                <div class="create-new">
                    <a href="javascript:void(0);" id="btnCreateAlbum"><span>新建相册</span>
                    </a>
                    <!-- 创建新相册弹出层 -->
                    <div id="dialogCreateAlbum" title="创建新相册" style="display:none">
                        <label> 请输入相册名: <input type="text" id="newAlbumName" /> </label>
                    </div>
                </div>
			</div>
			<!-- /选择上传相册 -->

			<!-- 上传图片面板 -->
			<div class="upload-board-1">
				<!-- 点击上传 -->
				<!-- <div class="start-upload-btn">点击上传图片</div>-->
				<!-- /点击上传 -->

				<!-- 预览模式 -->
				<!-- <div class="upload-temp-preview" style="display:none;"></div>-->
				<!-- /预览模式 -->

				<img class="area-img" id="areaImg" style="display: none;">
				<div id="reselect2" onclick="delfile2();" class="start-upload-btn" style="cursor: pointer;display: none;">重新选择</div>
				<input class="input_opacity" type="file" id="file2" name="file2">
				<label id="upPic2" class="start-upload-btn" style="cursor:pointer;"
					for="file2"><a class="start-upload-btn" id="b_selfile"
					href="javascript:;">点击上传图片 </a> </label>
			</div>
			<!-- /上传图片面板 -->
		</div>
	</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
	$('.fancybox-thumbs').fancybox();

	$('.fancybox-thumbs').fancybox({
		prevEffect : 'none',
		nextEffect : 'none',
		closeBtn  : false,
		arrows    : false,
		nextClick : true,
		helpers : {
			thumbs : {
				width  : 50,
				height : 50
			}
		}
	});
});

$(window).bind('scroll', function(){
	var a = $(this).scrollTop(),
		b = $(this).outerHeight();
	if ( a > 100 ) {
		$('#btt').css({'display':'block','top':a+b-200});
	} else {
		$('#btt').css('display','none');
	}
});

// 预览图和完整图切换
$('.zoom-out,.collapse-btn').click(function(){
	$(this).parents('.xxs-extend').css('display','none')
	.prev('.xxs-media-pre').css('display','block');
});
$('.zoom-in').click(function(){
	$(this).parents('.xxs-media-pre').css('display','none')
	.next('.xxs-extend').css('display','block');
});



$('#dialogUploadAlbum').dialog({
	//背景变暗
	modal: true,
	autoOpen : false,
	show : "fade",
    hide : "fade",
	width : "530",
	height : "660",
	buttons: {
		"确定": function() {
			if(isnull($("#uaUptid").val())){
                $().message("请先新建相册");
                return
            }
			var fun = function(data) {
				if(1==data.s){
					
					$('#file2').show();
					$('#upPic2').show();
					$('#areaImg').hide();
					$('#reselect2').hide();
					
					imgName = "";
					loadImgType();
					$().message("照片添加成功");
					$('#dialogUploadAlbum').dialog("close");
				}
			};
			exeAjax(
					ajaxUrl("${aier_url}${aier_urijs}classesalbum_addClassPhotoImg${aier_suffix}"),
					fun, {
						"cptid" : $("#uaUptid").val(),
						"img" : imgName
					});

		},"取消": function() {
			$( this ).dialog( "close" );
		}
	}
});

$('#btnUploadAlbum').click(function(){
	$('#dialogUploadAlbum').dialog('open');
});

    //创建相册 
    $('#dialogCreateAlbum')
        .dialog(
                {
                    //背景变暗
                    modal : true,
                    autoOpen : false,
                    show : "fade",
                    hide : "fade",
                    width : "320",
                    height : "240",
                    buttons : {
                        "确定" : function() {
                            if(isnull($("#newAlbumName").val())){
                                $().message("请输入相册名称！");
                                return
                            }
                            var fun = function(data) {
                                    if(1==data.s){
                                        $().message("创建相册成功！");
                                        $("#newAlbumName").val("");
                                        loadImgType();
                                        $('#dialogCreateAlbum').dialog("close");
                                    } else {
                                    	 $().message("创建相册失败，请稍后再试！");
                                    }
                            };
                            exeAjax(
                                    ajaxUrl("${aier_url}${aier_urijs}classesalbum_addClassPhotoType${aier_suffix}"),
                                    fun, {
                                        "pname" : $("#newAlbumName").val(),
                                        "cid" : "${cid}"
                                    });

                        },
                        "取消" : function() {
                            $(this).dialog("close");
                        }
                    }
                });

	$('#btnCreateAlbum').click(function() {
	    $('#dialogCreateAlbum').dialog('open');
	});


//上传照片
//上传文件
	var imgName = "";
	function upfile2() {
		var pName = $("#file2").val().split("\\")[2];
		if (isnull(pName)) {
			$().message("请选择图片！");
			return;
		}
		var pname1 = pName.substring(pName.lastIndexOf('.')).toLowerCase();
		try {
			$.ajaxFileUpload({
						url : "${aier_url}${aier_urijs}classesalbum_uploadClassPhotoImg${aier_suffix}?photoName="
								+ pname1,
						secureuri : false,
						fileElementId : 'file2',
						dataType : 'json',
						success : function(data, status) {
							$('#file2').hide();
							$('#upPic2').hide();
							$('#areaImg').show();
							$('#reselect2').show();
							$('#areaImg').attr("src", "${classgal_get_url}origin/" + data.img);
							imgName = data.img;
						},
						error : function(data, status, e) {
							$().message("服务器连接超时");
						}
					});
		} catch (e) {
			$().message("服务器连接超时");
		}
		
	}
	
	//重新选择图片
	function delfile2() {
		var fun = function(data) {
			if (data.s == 1) {
				$('#file2').show();
				$('#upPic2').show();
				$('#areaImg2').hide();
				$('#reselect2').hide();
				
				imgName = "";
			} else {
				$().message("删除失败，请稍后再试！");
			}
		};
		exeAjax(
				ajaxUrl("${aier_url}${aier_urijs}classesalbum_deleteUploadImg${aier_suffix}"),
				fun, {
					"img" : imgName
				});
	}

	$("#file2").live('change', function() {
		upfile2();
	});
	

	//加载相册类别
    function loadImgType(){
        var fun = function(data) {
            
            if(!isnull(data.cptList)){
                var cptList = data.cptList;
                
                var temp = "<select id='uaUptid' class='chosen'>";
                var te = "<ul class='float-list clearfix list'>";
                
                for(var i=0;i<cptList.length;i++){
                    temp +="<option value="+cptList[i].cptid+">"+cptList[i].pname+"</option>";
                    te +="<li><div class='album-cover'><div class='bottom-layer'><div class='cover-layer'>"+
                    "<a style='width:100%;height:100%' href='${aier_url}classes/classeshome_classesPhotosIn.shtml?cid=${cid}&cptid="+
                    		cptList[i].cptid+"'><img style='width:100%;height:100%' src='${classgal_get_url}small/"+
                    		cptList[i].img+"'> </a></div></div></div><div class='album-title'>"
                    		+"<a href='${aier_url}classes/classeshome_classesPhotosIn.shtml?cptid="+cptList[i].cptid+"'>"+cptList[i].pname+"</a>"+
                    				"<span>(共"+cptList[i].num_img+"张)</span></div></li>";

                }
                temp += "</select>";
                te +="</ul>";
                $("#uaUptidDiv").html(temp);
                $(".chosen").chosen();
                $("#uptListDiv").html(te);
            }else{
                $("#uaUptidDiv").html("");
                $("#uptListDiv").html("");
            }
        };
        exeAjax(
                ajaxUrl("${aier_url}${aier_urijs}classesalbum_searchClassImgtype${aier_suffix}"),
                fun, {
                    "cid" : "${cid}"
                });
    }
loadImgType();
</script>
</html>